<template>
	<view>
		<!-- 搜索 -->
		<view class="plr14 pt10 posFixed zIndex999 w100 bgWhite">
			<view class="align-center">
				<view class="head-inp align-center posRelative"
					:style="{width:(isSearch || iscancel ? '600':'700'  )+ 'rpx'}">
					<image class="inp-img" src="../../static/images/fans/search.png" mode=""></image>
					<input confirm-type="search" @confirm="search" v-model="keyword" id="input" class="inp-val gray3" type="text"
						:placeholder="$t('mine').交易类型" @focus.stop="getfocus" @blur.stop="loseblur"
						@input.stop="winput">
					<view @click.stop="clearkey()" v-if="keyword!=''&& (isSearch || iscancel )"
						class="posAbsort rt0 top0 flex-col align-center justify-center plr10" style="height: 60rpx;">
						<image class="inp-img" src="../../static/images/mine/icon/delete.png" mode=""></image>
					</view>

				</view>

				<view class="ml10 red" v-if="isSearch && keyword!=''" @click="search()"><text>{{$t('common').搜索}}</text>
				</view>
				<view class="ml10" v-if="iscancel && keyword==''"><text>{{$t('common').取消}}</text></view>
			</view>
			<view class=" align-center mt15 pb10" @click="show = true">
				<view class="ft14 gray3 bold mr5"><text>{{yearMonth}}</text></view>
				<image src="../../static/images/wallet/heixia.png" mode="aspectFill"
					style="width: 19rpx;height: 10rpx;">
				</image>
			</view>
		</view>
		<!-- 全年明细 -->
		<mescroll-body top='150' @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"
			:down="downOption">
			<view class="plr14">
				<view class="plr10 bdbe ptb10" v-for="(item,index) in flowingList" :key="index">
					<view class="ft14 gray3"><text>{{item.pay_type}}-{{item.content}}</text></view>
					<view class="align-center justify-between ptb5">
						<view class="ft12 gray9"><text>{{item.order_sn}}</text></view>
						<view class="ft14 " :style="{color:(item.money>0?'#F23C4B':'#333333')}">
							<!-- <text>{{item.money>0?'+':'-'}}{{(item.money.substring(1)) |changeCurrency}}</text> -->
							<text>{{$store.state.currency=='CNY'?'':"$"}}{{item.money>0?'+':''}}{{item.money |changeCurrency}}</text>
						</view>
					</view>
					<view class="align-center justify-between">
						<view class="ft12 gray9"><text>{{item.created_at}}</text></view>
						<view class="ft12 gray9">
							<text>{{$t('mine').余额}}{{$store.state.currency=='CNY'?'￥':"$"}}{{item.after |changeCurrency}}</text>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<!-- <view>
			<u-datetime-picker title="选择时间" cancelColor="#999999" confirmColor="#333333" ref="datetimePicker"
				:show="show" v-model="value1" mode="year-month" @cancel="show = false" @confirm="confirmM"
				:closeOnClickOverlay="true" @close="show = false"></u-datetime-picker>
		</view> -->
		<u-popup :show="show" mode="bottom" @close="close" :safeAreaInsetBottom="false">
			<view class="">
				<view class="plr15 align-center justify-between ptb15">
					<view class="gray9" @click="show=false">{{$t('common').取消}}</view>
					<view class="ft16">{{$t('mine').选择时间}}</view>
					<view class="gray9" @click="confirm()">{{$t('index').确定}}</view>
				</view>
				<view class="flex-row plr15">
					<view class="align-center btnbox radius22 tc">
						<view :class="['radius22 gray9',{'white bglight':type==index}]" v-for="(item,index) in 2"
							:key="index" @click="changeType(index)">
							<text>{{index==0?$t('mine').按月:$t('mine').按年}}</text>
						</view>
					</view>
				</view>

				<view class="picker">
					<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange"
						class="picker-view">
						<picker-view-column>
							<view class="item" v-for="(item,index) in years" :key="index">{{item}}{{$t('mine').年}}
							</view>
						</picker-view-column>
						<picker-view-column v-show="type==0">
							<view class="item" v-for="(item,index) in months" :key="index">{{item}}{{$t('mine').月}}
							</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>

		</u-popup>
	</view>
</template>

<script>
	const date = new Date()
	const years = []
	const year = date.getFullYear()
	for (let i = date.getFullYear() - 10; i <= date.getFullYear(); i++) {
		years.push(i)
	}
	const months = []
	for (let i = 1; i <= 12; i++) {
		months.push(i)
	}
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {

			return {
				show: false,
				value1: Number(new Date()),
				yearMonth: '',

				type: 0,
				years,
				months: months,
				value: [10, 2],
				visible: true,
				indicatorStyle: `height: 50px;`,
				downOption: {
					auto: true
				},
				upOption: {
					auto: false,
					page: {
						size: 20
					},
					textNoMore: this.$t('common').已经到底了,
					empty: {
						tip: this.$t('common').暂无数据 // 空提示
					}
				},
				flowingList: [], //流水明细
				selyear: '', //选中的年
				selyearmo: '', //选中的年月
				isSearch: false,
				iscancel: false,
				keyword: '', //搜索关键词
			}
		},
		onLoad() {
			this.getNowDate()
			uni.setNavigationBarTitle({
				title: this.$t('mine').流水明细
			})
		},
		methods: {
			// 搜索框聚焦时
			getfocus() {
				console.log(this.keyword)
				if (this.keyword != '') {
					console.log(this.keyword != '')
					this.isSearch = true
				} else {
					this.iscancel = true
				}

			},
			// 失去焦点
			loseblur() {
				setTimeout(() => {
					this.isSearch = false
					this.iscancel = false
				}, 100)
			},
			// 键盘输入时
			winput(e) {
				this.keyword = e.detail.value
				if (this.keyword) {
					this.isSearch = true
					this.iscancel = false
				} else {
					this.isSearch = false
					this.iscancel = true
					this.search()
				}

			},
			// 清除关键字
			clearkey() {
				this.iscancel = true
				this.keyword = ''
				this.search()
			},
			// 搜索
			async search() {
				this.mescroll.resetUpScroll()
			},
			bindChange(e) {
				console.log(e.detail.value)
				this.value = e.detail.value
			},
			close() {
				this.show = false
			},
			changeType(index) {
				this.type = index;
			},
			getNowDate() {
				let date = new Date()
				let year = date.getFullYear()
				let month = (date.getMonth() + 1 < 10 ? '' + (date.getMonth() + 1) : date.getMonth() + 1);
				this.yearMonth = year + this.$t('mine').年 + month + this.$t('mine').月
				this.selyearmo = year + '-' + month
				this.value[1] = date.getMonth()
				console.log(this.value[1])
				this.show = false
			},
			confirm() {
				if (this.type == 0) {
					let year = this.years[this.value[0]]
					let month = this.months[this.value[1]]
					this.yearMonth = year + this.$t('mine').年 + month + this.$t('mine').月
					this.selyearmo = year + '-' + month
					this.selyear = ''
					this.mescroll && this.mescroll.resetUpScroll()
				} else {
					let year = this.years[this.value[0]]
					this.yearMonth = year + this.$t('mine').年
					this.selyearmo = ''
					this.selyear = year
					this.mescroll && this.mescroll.resetUpScroll()
				}
				this.show = false
			},
			// 获取流水明细
			upCallback(page) {
				if (page.num == 1) this.flowingList = []; //如果是第一页需手动制空列表
				this.$api.flowing({
					page: page.num,
					limit: page.size,
					year: this.selyear,
					moon: this.selyearmo,
					keyword: this.keyword,
				}).then(res => {
					let curPageData = res.data.list; //当前页的数据列表
					let curPageLen = curPageData.length; //当前页的数据长度
					let totalPage = parseInt(res.data.count / 20) + 1; //总页数
					let hasNext = page.num === totalPage ? false : true //根据页数判断是否有下一页
					this.flowingList = this.flowingList.concat(curPageData); //追加新数据
					this.mescroll.endSuccess(curPageLen, hasNext);
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.btnbox {
		background: #eeeeee;

		view {
			width: 110rpx;
			height: 54rpx;
			line-height: 54rpx;
		}
	}

	.picker-view {
		width: 750rpx;
		height: 520rpx;
	}

	.item {
		line-height: 100rpx;
		text-align: center;

	}

	.head-inp {
		// width: 100%;
		height: 60rpx;
		box-sizing: border-box;
		padding: 0 20rpx;
		background: #F5F5F5;
		border-radius: 100rpx;

		.inp-img {
			width: 32rpx;
			height: 32rpx;
			margin-right: 16rpx;
		}

		.inp-val {
			width: 500rpx;
			height: 60rpx;
			font-size: 28rpx;
		}
	}
</style>